From b45baf7b603c19af7c9f0c98a0df291ca2c305a8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 17 Oct 2022 13:31:15 -0700
Subject: max file size

---
 src/routes/[username]/settings/_account.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'src/routes/[username]/settings')

diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index bb229b93..10756c7a 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -36,9 +36,14 @@
 		percent = Math.round((event.loaded / event.total) * 100);
 	};
 
+	let tooLarge = {};
+
 	let files = { profile: {}, banner: {} };
 	let handleFile = async ({ target }, type) => {
+		tooLarge[type] = false;
 		let file = target.files[0];
+		console.log('TYPE', file.size);
+		if (file.size > 5000000) return (tooLarge[type] = true);
 		var reader = new FileReader();
 		reader.onload = async (e) => {
 			files[type].src = e.target.result;
@@ -118,6 +123,7 @@
 
 <div>
 	<span class="font-bold">{$t('user.settings.profileImage')}</span>
+
 	<div class="flex">
 		{#if profile}
 			<div
@@ -136,7 +142,7 @@
 				on:click={() => select('profile')}
 			>
 				<img
-					src={`/api/public/${user.username}-profile.png`}
+					src={`/api/public/${user.username}-profile.webp`}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 					alt={user.username}
 				/>
@@ -167,6 +173,10 @@
 			{/if}
 		</div>
 	</div>
+
+	{#if tooLarge['profile']}
+		<div class="text-red-600">Max file size 5MB</div>
+	{/if}
 </div>
 
 <div>
@@ -184,7 +194,7 @@
 		/>
 	{:else if user.banner}
 		<img
-			src={`/api/public/${user.username}-banner.png`}
+			src={`/api/public/${user.username}-banner.webp`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
 			alt="Banner"
@@ -212,6 +222,10 @@
 	{#if files.banner.filename}
 		<div class="mt-2 text-sm">{files.banner.filename}</div>
 	{/if}
+
+	{#if tooLarge['banner']}
+		<div class="text-red-600">Max file size 5MB</div>
+	{/if}
 </div>
 
 <!-- TODO
-- 
cgit v1.2.3


From a67f9cbc9f609aa56e445fe8f422ba3be14e9345 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 21 Oct 2022 21:18:10 -0700
Subject: pin code input

---
 src/components/Qr.svelte                        |   4 +-
 src/lib/upload.js                               |   1 -
 src/lib/utils.js                                |   1 -
 src/routes/[username]/settings/+page.server.js  |   4 +-
 src/routes/[username]/settings/+page.svelte     |  28 +++++--
 src/routes/[username]/settings/_account.svelte  |  18 +++-
 src/routes/[username]/settings/_security.svelte | 104 +++++++++++++++++++-----
 7 files changed, 125 insertions(+), 35 deletions(-)

(limited to 'src/routes/[username]/settings')

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 0ae028b9..3870abe0 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -57,8 +57,8 @@
 {#if mask}
 	<div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
 {/if}
-<div bind:this={qr} on:click={toggle} class:hidden={full} class="relative overflow-visible" />
-<div bind:this={fullQr} on:click={toggle} class:hidden={!full} />
+<div bind:this={qr} on:click={toggle} on:keydown={toggle} class:hidden={full} class="relative overflow-visible" />
+<div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} />
 
 <style>
 	div {
diff --git a/src/lib/upload.js b/src/lib/upload.js
index 0e8a2908..099e2f30 100644
--- a/src/lib/upload.js
+++ b/src/lib/upload.js
@@ -1,5 +1,4 @@
 export const upload = async (file, type, progress, token) => {
-	console.log('FILE', file);
 	let url = `/api/upload/${type}`;
 	let formData = new FormData();
 	formData.append('file', file);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 7cb09c61..d8a7b60c 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -36,7 +36,6 @@ export const post = (url, body, headers) => {
 	return fetch(base + url, { method: 'POST', body: JSON.stringify(body), headers })
 		.then((r) => r.text())
 		.then((body) => {
-			console.log('BODY', body);
 			try {
 				body = JSON.parse(body);
 			} catch (e) {
diff --git a/src/routes/[username]/settings/+page.server.js b/src/routes/[username]/settings/+page.server.js
index 7053a939..deb4356e 100644
--- a/src/routes/[username]/settings/+page.server.js
+++ b/src/routes/[username]/settings/+page.server.js
@@ -3,9 +3,11 @@ import { auth, get, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
+		let form = Object.fromEntries(await request.formData())
+
 		let user = {
 			...(await get('/me', auth(cookies))),
-			...Object.fromEntries(await request.formData())
+			...form
 		};
 
 		try {
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index c1ac20d0..a584fc56 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -4,7 +4,7 @@
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { Icon } from '$comp';
+	import { Icon, Spinner } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success } from '$lib/utils';
 	import { avatarUpload, bannerUpload } from '$lib/store';
@@ -26,19 +26,29 @@
 
 	$: ({ comp } = tabs.find((t) => t.name === tab));
 
-	let save = async () => {
+	let loading, submit;
+	let save = async (msg) => {
+		loading = true;
+		if (typeof msg !== 'string') msg = 'Settings saved';
+
+    console.log("SAVING ONCE")
+
 		try {
 			if ($avatarUpload) {
 				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
 			}
+
 			if ($bannerUpload) {
 				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
 			}
-			success('Settings saved');
+
+			success(msg);
 		} catch (e) {
 			console.log(e);
 			failure('Something went wrong');
 		}
+
+		loading = false;
 	};
 </script>
 
@@ -58,16 +68,22 @@
 			{/each}
 		</div>
 
-		<svelte:component this={comp} {user} {rates} />
+		<svelte:component this={comp} {user} {rates} {submit} />
 	</div>
 	<div
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
 	>
 		<button
+  bind:this={submit}
 			type="submit"
-			class="bg-black text-white rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+			class:bg-black={loading}
 		>
-			<div class="my-auto">Save Settings</div>
+			{#if loading}
+				<Spinner />
+			{:else}
+				<div class="my-auto">Save Settings</div>
+			{/if}
 		</button>
 	</div>
 </form>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 10756c7a..d7ab9f5e 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -17,6 +17,7 @@
 	$: banner = files.banner.src;
 	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
 
+	let togglePassword = () => (revealPassword = !revealPassword);
 	let colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
 		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
@@ -88,7 +89,8 @@
 	{/if}
 	<button
 		type="button"
-		on:click={() => (revealPassword = !revealPassword)}
+		on:click={togglePassword}
+		on:keydown={togglePassword}
 		class="absolute right-5 top-11"
 	>
 		<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
@@ -129,6 +131,7 @@
 			<div
 				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<img
 					src={profile}
@@ -140,6 +143,7 @@
 			<div
 				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<img
 					src={`/api/public/${user.username}-profile.webp`}
@@ -151,6 +155,7 @@
 			<div
 				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
 			>
 				<Icon icon="logo-symbol-white" style="mx-auto" />
 			</div>
@@ -160,7 +165,9 @@
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-				on:click={() => select('profile')}>Select</button
+    on:click={() => select('profile')}
+    on:keydown={() => select('profile')}
+    >Select</button
 			>
 			<input
 				type="file"
@@ -190,6 +197,7 @@
 			src={banner}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{:else if user.banner}
@@ -197,12 +205,14 @@
 			src={`/api/public/${user.username}-banner.webp`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
 			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
 			alt="Banner"
 		/>
 	{/if}
@@ -211,7 +221,8 @@
 	<button
 		type="button"
 		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-		on:click={() => select('banner')}>Select</button
+		on:click={() => select('banner')}
+		on:keydown={() => select('banner')}>Select</button
 	>
 	<input
 		type="file"
@@ -240,6 +251,7 @@
 				? 'border-black'
 				: ''}"
 			on:click={() => handleThemeClick(colors)}
+			on:keydown={() => handleThemeClick(colors)}
 		/>
 	{/each}
 </div> -->
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 2a490aa4..a74517aa 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -5,25 +5,75 @@
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { post, success, failure } from '$lib/utils';
 
-	export let user;
+	export let user, submit;
 
 	let settingPin, setting2fa, disabling2fa;
 
-	let code = [];
-	let pin = '';
 	let token = '';
-	let tokenInput, pinInput;
+	let pinCode = [];
+	let verifyCode = [];
+	let tokenInput, pinInput, verifyInput;
+	let verifying = false;
 
+	let startVerifying = () => {
+		verifying = true;
+	};
+
+	$: pin = pinCode.join('');
+
+	let locked;
+	$: verifyCode.join('').length > 5 && checkPin();
+	let checkPin = async () => {
+		if (locked) return;
+		locked = true;
+
+		let verify = verifyCode.join('');
+
+		pinCode = ['', '', '', '', '', ''];
+		verifyCode = ['', '', '', '', '', ''];
+		settingPin = false;
+
+		try {
+			if (pin.length > 5 && pin === verify) {
+				user.pin = pin;
+				submit.click();
+			} else {
+				failure('Pin mismatch, try again');
+				settingPin = true;
+				pinInput.focusFirstInput();
+			}
+		} catch (e) {
+			failure('Problem setting PIN');
+		}
+
+		verifying = false;
+
+		await new Promise((r) => setTimeout(r, 500));
+		locked = false;
+	};
+
+	$: if (verifying) verifyInput && tick().then(verifyInput.focusFirstInput);
 	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
-	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput?.focusFirstInput);
 
 	let reset = () => {
 		token = '';
-		code = [];
 		return true;
 	};
 
-	let togglePin = () => (settingPin = !settingPin);
+	let togglePin = async () => {
+		if (user.pin) {
+			try {
+				user.pin = null;
+				submit.click();
+			} catch (e) {
+				failure('Failed to disable pin');
+			}
+		} else {
+			settingPin = true;
+		}
+	};
+
 	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
 	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
 
@@ -58,31 +108,43 @@
 	$: otpUri = `otpauth://totp/coinos:${user.username}?secret=${user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
-<!-- TODO
 <div>
-	<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
+	<input type="hidden" name="pin" value={pin} />
+	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
 	{#if settingPin}
 		<div class="flex my-4">
 			<div class="mx-auto">
-				<Pincode bind:code bind:value={user.pin} bind:this={pinInput}>
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-					<PincodeInput />
-				</Pincode>
+				<div class:hidden={verifying}>
+					<Pincode on:complete={startVerifying} bind:code={pinCode} bind:this={pinInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
+				<div class:hidden={!verifying}>
+					<Pincode bind:code={verifyCode} bind:this={verifyInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
 			</div>
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
+			><Icon icon="lock" style="mr-1" /> {user.pin ? 'Disable Pin' : 'Enable Pin'}</button
 		>
 	{/if}
-</div> -->
+</div>
 
 <!-- TODO
 <div>
@@ -116,7 +178,7 @@
 
 		<div class="text-center my-4">
 			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<Pincode bind:value={token} bind:this={tokenInput}>
 				<PincodeInput />
 				<PincodeInput />
 				<PincodeInput />
@@ -128,7 +190,7 @@
 	{:else if disabling2fa}
 		<div class="text-center my-4">
 			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<Pincode bind:value={token} bind:this={tokenInput}>
 				<PincodeInput />
 				<PincodeInput />
 				<PincodeInput />
-- 
cgit v1.2.3


From 0e17224e71296cf6a0336c5a2e7340a3b63cd2dc Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 24 Oct 2022 22:26:13 -0700
Subject: pin code

---
 src/components/Pin.svelte                       | 44 +++++++++++++++++++++++++
 src/components/index.js                         |  1 +
 src/lib/store.js                                |  1 +
 src/locales/en.json                             |  2 +-
 src/locales/es.json                             |  2 +-
 src/routes/[username]/settings/+page.server.js  |  2 +-
 src/routes/[username]/settings/+page.svelte     | 21 +++++++++---
 src/routes/[username]/settings/_account.svelte  |  5 ++-
 src/routes/[username]/settings/_security.svelte | 15 ++++++---
 9 files changed, 77 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Pin.svelte

(limited to 'src/routes/[username]/settings')

diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
new file mode 100644
index 00000000..3e5769b0
--- /dev/null
+++ b/src/components/Pin.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { tick } from "svelte";
+	import { pin } from '$lib/store';
+	import { Pincode, PincodeInput } from 'svelte-pincode';
+	let complete = () => {};
+	let pinCode = [];
+	let pinInput;
+
+	let submit, loading;
+
+	$: pinInput && tick().then(pinInput.focusFirstInput);
+	$: pinCode.length > 5 && ($pin = pinCode.join(''));
+</script>
+
+<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20">
+	<div class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5">
+		<h1 class="text-center text-2xl font-semibold">Please enter your PIN</h1>
+		<div class="text-center">
+			<Pincode bind:complete bind:code={pinCode} bind:this={pinInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
+
+		<div class="w-full flex">
+			<button
+				bind:this={submit}
+				type="submit"
+				class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+				class:bg-black={loading}
+			>
+				{#if loading}
+					<Spinner />
+				{:else}
+					<div class="my-auto">Cancel</div>
+				{/if}
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index d0af4c38..c3a5000c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Pin } from './Pin.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Lock } from './Lock.svelte';
 export { default as Calendar } from './Calendar.svelte';
diff --git a/src/lib/store.js b/src/lib/store.js
index e317ed24..4e5421ba 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -38,3 +38,4 @@ export const colorTheme = writable('from-primary to-gradient');
 export const tempProfileFiles = writable();
 export const avatarUpload = writable();
 export const bannerUpload = writable();
+export const pin = writable();
diff --git a/src/locales/en.json b/src/locales/en.json
index 60cd1b0e..b5aef47a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -32,7 +32,7 @@
 				"bio": "Strategic & Project Management. Jack of all Trades. Can always find time to meet for coffee."
 			},
 			"cole": {
-				"name": "Cole Goodwin",
+				"name": "Cole",
 				"position": "Bitcoin Professional",
 				"bio": "As a Certified Bitcoin Professional, Cole is a driven individual with a passion for freedom. He came across bitcoin in 2016 and studied it in depth. Now he wants to introduce the lightning network to as many users as possible."
 			},
diff --git a/src/locales/es.json b/src/locales/es.json
index 5fad6dd8..068d93a5 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -32,7 +32,7 @@
 				"bio": "Gestión Estratégica y de Proyectos. Ella es una todóloga. Siempre encuentra tiempo para reunirse a tomar un café."
 			},
 			"cole": {
-				"name": "Cole Goodwin",
+				"name": "Cole",
 				"position": "Profesional en Bitcoin",
 				"bio": "Como profesional certificado de Bitcoin, Cole es una persona motivada y apasionada por la libertad. Encontró bitcoin en el año 2016 bitcoin y se dedicó a estudiarlo en profundidad. Ahora quiere presentar Lightning Network a tantos usuarios como sea posible."
 			},
diff --git a/src/routes/[username]/settings/+page.server.js b/src/routes/[username]/settings/+page.server.js
index deb4356e..ae7e0a78 100644
--- a/src/routes/[username]/settings/+page.server.js
+++ b/src/routes/[username]/settings/+page.server.js
@@ -3,7 +3,7 @@ import { auth, get, post } from '$lib/utils';
 
 export const actions = {
 	default: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData())
+		let form = Object.fromEntries(await request.formData());
 
 		let user = {
 			...(await get('/me', auth(cookies))),
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index a584fc56..7bd4ddcc 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,21 +1,28 @@
 <script>
+	import { fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import Account from './_account.svelte';
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { Icon, Spinner } from '$comp';
+	import { Icon, Spinner, Pin } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success } from '$lib/utils';
-	import { avatarUpload, bannerUpload } from '$lib/store';
+	import { avatarUpload, bannerUpload, pin } from '$lib/store';
 	import { upload } from '$lib/upload';
 
 	export let data;
+	export let form;
 
 	let { user, rates, token } = data;
 	$: update(data);
 	let update = () => ({ user, rates, token } = data);
 
+	$: if (form?.message?.startsWith('Pin')) {
+		failure('Wrong pin, try again');
+		$pin = '';
+	}
+
 	let tab = 'account';
 
 	let tabs = [
@@ -31,8 +38,6 @@
 		loading = true;
 		if (typeof msg !== 'string') msg = 'Settings saved';
 
-    console.log("SAVING ONCE")
-
 		try {
 			if ($avatarUpload) {
 				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
@@ -52,7 +57,13 @@
 	};
 </script>
 
+{#if user.haspin && $pin?.length !== 6}
+	<Pin />
+{/if}
+
 <form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
+	<input type="hidden" name="pin" value={$pin} />
+
 	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
@@ -74,7 +85,7 @@
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
 	>
 		<button
-  bind:this={submit}
+			bind:this={submit}
 			type="submit"
 			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
 			class:bg-black={loading}
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index d7ab9f5e..f139b3f4 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -165,9 +165,8 @@
 			<button
 				type="button"
 				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-    on:click={() => select('profile')}
-    on:keydown={() => select('profile')}
-    >Select</button
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}>Select</button
 			>
 			<input
 				type="file"
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index a74517aa..98b9b503 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -4,6 +4,7 @@
 	import { Icon, Qr } from '$comp';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { post, success, failure } from '$lib/utils';
+	import { pin as current } from '$lib/store';
 
 	export let user, submit;
 
@@ -14,6 +15,7 @@
 	let verifyCode = [];
 	let tokenInput, pinInput, verifyInput;
 	let verifying = false;
+	let old;
 
 	let startVerifying = () => {
 		verifying = true;
@@ -24,6 +26,7 @@
 	let locked;
 	$: verifyCode.join('').length > 5 && checkPin();
 	let checkPin = async () => {
+		old = $current;
 		if (locked) return;
 		locked = true;
 
@@ -35,7 +38,8 @@
 
 		try {
 			if (pin.length > 5 && pin === verify) {
-				user.pin = pin;
+				user.haspin = true;
+				$current = pin;
 				submit.click();
 			} else {
 				failure('Pin mismatch, try again');
@@ -62,9 +66,9 @@
 	};
 
 	let togglePin = async () => {
-		if (user.pin) {
+		if (user.haspin) {
 			try {
-				user.pin = null;
+				pin = null;
 				submit.click();
 			} catch (e) {
 				failure('Failed to disable pin');
@@ -109,7 +113,8 @@
 </script>
 
 <div>
-	<input type="hidden" name="pin" value={pin} />
+	<input type="hidden" name="newpin" value={pin} />
+
 	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
@@ -141,7 +146,7 @@
 		</div>
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {user.pin ? 'Disable Pin' : 'Enable Pin'}</button
+			><Icon icon="lock" style="mr-1" /> {user.haspin ? 'Disable Pin' : 'Enable Pin'}</button
 		>
 	{/if}
 </div>
-- 
cgit v1.2.3